import type { ButtonShape, ButtonSize, ButtonVariant } from "@/components/Button";
import Button from "@/components/Button";
import Panel from "@/components/Panel";

const shapes: ButtonShape[] = ["round", "circle", "default"];
const variants: ButtonVariant[] = ["primary", "secondary", "danger", "outline"];
const sizes: ButtonSize[] = ["sm", "md", "lg"];

export default function Buttons() {
  return (
    <Panel title="Buttons" className="bg-white">
      <div className="flex flex-col gap-4">
        <div className="flex gap-4">
          {shapes.map((shape) => (
            <Button shape={shape} key={shape}>
              {shape}
            </Button>
          ))}
        </div>
        <div className="flex gap-4">
          {variants.map((variant) => (
            <Button variant={variant} key={variant}>
              {variant}
            </Button>
          ))}
        </div>
        <div className="flex gap-4">
          {variants.map((variant) => (
            <Button variant={variant} key={variant} disabled>
              disabled
            </Button>
          ))}
        </div>
        <div className="flex gap-4 ">
          {sizes.map((size) => (
            <Button size={size} key={size}>
              {size}
            </Button>
          ))}
        </div>
      </div>
    </Panel>
  );
}
